<template>
  <div class="mod-config">
    <!-- 查询条件 -->
    <div
      v-loading="loadingPage"
      class="search-form search_form"
    >
      <el-form
        :model="searchForm"
        size="mini"
        label-position="right"
        class="demo-form-inline"
        label-width="110px"
      >
        <el-row :gutter="10">
          <el-col :span="6">
            <el-form-item label="部门：" prop="deptId">
              <el-select v-model="searchForm.deptId" placeholder="请选择部门" filterable clearable
              >
                <el-option
                  v-for="item  in  deptList"
                  :key="item.name"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
<!--          <el-col :span="6">-->
<!--            <el-form-item label="状态：">-->
<!--              <el-select v-model="searchForm.publishStatus" placeholder="请选择" filterable clearable>-->
<!--                <el-option-->
<!--                  v-for="item in optionsStates"-->
<!--                  :key="item.value"-->
<!--                  :label="item.label"-->
<!--                  :value="item.value">-->
<!--                </el-option>-->
<!--              </el-select>-->
<!--            </el-form-item>-->
<!--          </el-col>-->
          <el-col :span="6">
            <el-form-item label="月份：" prop="createTime">
              <el-date-picker
                v-model="searchForm.createTime"
                type="month"
                value-format="yyyy-MM"
                placeholder="选择月">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col
            :span="4"
            style="text-align:center;"
          >
            <el-button
              size="mini"
              type="primary"
              @click="searchBtn"
            >查询
            </el-button>
            <el-button
              size="mini"
              @click="emptyClick"
            >清空
            </el-button>

          </el-col>
        </el-row>
      </el-form>
    </div>
    <div>
      <el-col
        :span="8"
        style="text-align:left; margin-bottom: 10px;"
      >
        <el-button
          v-hasPermi="['/permission/depecommxport']"
          size="mini"
          type="info"
          @click="exportForm"
        >导出
        </el-button>
        <el-button
          v-hasPermi="['/permission/depecomsheet']"
          size="mini"
          type="success"
          @click="deptSheet"
        >部门表格
        </el-button>
      </el-col>
    </div>
    <el-table
      v-loading="loading"
      :data="tableData"
      border
      :row-key="bindRowKeys"
      style="width: 100%;"
      @selection-change="handleSelectionChange"
      @sort-change="getOrder"
    >
      <el-table-column
        type="selection"
        header-align="center"
        align="center"
        reserve-selection="reserve-selection"
        width="50"
      />
      <el-table-column
        prop="deptName"
        header-align="center"
        align="center"
        label="部门名称"
      />
      <el-table-column
        prop="targetKeyBusiness"
        header-align="center"
        align="center"
        label="目标任务-关键业绩"
        width="90">
      </el-table-column>

      <el-table-column
        prop="targetPeerBenchmarking"
        header-align="center"
        align="center"
        label="目标任务-同业对标"
        width="90">
      </el-table-column>
      <el-table-column
        prop="keyBusinessCollaborate"
        header-align="center"
        align="center"
        label="关键业绩指标协作类"
      />
      <el-table-column
        prop="peerBenchmarkingCollaborate"
        header-align="center"
        align="center"
        label="同业对标指标协作类"
      />
      <el-table-column
        prop="focus"
        header-align="center"
        align="center"
        label="重点工作"
      />
      <el-table-column
        prop="focusCollaborate"
        header-align="center"
        align="center"
        label="重点工作协作类"
      />
      <el-table-column
        prop="partyCollaborate"
        header-align="center"
        align="center"
        label="党建工作考核"
      />
      <el-table-column
        prop="redLineExamine"
        header-align="center"
        align="center"
        label="红线指标考核"
      />
      <el-table-column
        prop="generalManagerContribute"
        header-align="center"
        align="center"
        label="总经理特别贡献奖"
      />
      <el-table-column
        prop="amount"
        header-align="center"
        align="center"
        label="合计"
      />
      <el-table-column
        prop="publishStatus"
        header-align="center"
        align="center"
        label="状态">
        <template slot-scope="scope">
          <span style="color: #999999 ;font-weight:bold" v-if="scope.row.publishStatus === 0">未发布</span>
          <span style="color: #13ce66;font-weight:bold" v-if="scope.row.publishStatus === 1">已发布</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="createTime"
        header-align="center"
        align="center"
        label="创建时间"
        width="150">
        <template slot-scope="scope">
          {{ new Date(scope.row.createTime).toLocaleDateString().replaceAll('/', '-') }}
        </template>
      </el-table-column>
    </el-table>
    <div class="progress_lok_page">
      <page
        :hidden="tableData && tableData.length === 0"
        :total="total"
        :page.sync="pageNo"
        :limit.sync="pageSize"
        @pagination="handlePageChange"
      />
    </div>

  </div>
</template>

<script>
  import axios from 'axios'
  import { Encrypt } from '../../utils/cryptoAES'
  import { AesDecrypt } from '../../utils/AesDecrypt'

  export default {
    data() {
      return {
        deptList: [],
        tableData: [],
        loadingPage: true,
        loading: true,
        currentPage: 0,
        pageNo: 1,
        pageSize: 10,
        total: 0,
        checkedArr: [], // 要导出的数据数组
        ids: [],
        searchForm: {
          deptName: '',// 搜索条件
          createTime:'',
          publishStatus: -1
        },
        optionsStates: [
          {
            value: -1,
            label: '全部'
          },
          {
            value: 0,
            label: '未发布'
          }, {
            value: 1,
            label: '已发布'
          }
        ]
      }
    },

    created() {
      var today = new Date ()
      var year = today.getFullYear ()//获取年份
      var month = today.getMonth () + 1//获取月份
      var monthOne = (month < 10) ? ('0' + month) : month
      this.searchForm.createTime = year + '-' + monthOne

      this.getList ()
      this.getDeptList ()
    },
    methods: {
      // 获取列表
      getList() {
        var uu = {
          page: this.pageNo,
          pageSize: this.pageSize,
          deptId: this.searchForm.deptId, // 部门
          createTime: this.searchForm.createTime,
          publishStatus: -1,
        }
        var jsonString = JSON.stringify (uu)
        var yy = Encrypt (jsonString)
        var encodedString = encodeURIComponent (yy)

        axios ({
          method: 'post',
          url: '/hr-xc-human-resources-perform-manage/generator/depperformanceoffice/list',
          data: encodedString
        }).then (({ data }) => {
          if (data && data.code === '00000') {
            var data = AesDecrypt (data.result)
            this.tableData = data.result.content
            this.total = data.result.total
            this.loading = false
            this.loadingPage = false
          } else {
            this.loading = false
            this.loadingPage = false
            this.$message.error (data.msg)
            this.tableData = []
          }
        }).catch(error => {
          this.$message.error ('服务器访问异常，请从新登录')
        });
      },
      // 导出
      async exportForm() {
        this.loadingPage = true
        this.ids = []
        if (this.checkedArr.length != 0) {
          this.checkedArr.forEach (item => {
            this.ids.push (item.id)
          })
        } else {
          this.ids = []
        }
        axios ({
          method: 'post',
          responseType: 'blob',
          url: '/hr-xc-human-resources-perform-manage/generator/depperformanceoffice/export',
          data: {
            ids: this.ids,
            deptId: this.searchForm.deptId, // 部门
            createTime: this.searchForm.createTime,
            publishStatus: -1,
          }
        }).then (({ data }) => {
          if (data.size) {
            const downloadElement = document.createElement ('a')
            const href = window.URL.createObjectURL (data) // 创建下载的链接
            downloadElement.href = href
            downloadElement.download = decodeURI ('绩效办公室.xls') // 下载后文件名
            document.body.appendChild (downloadElement)
            downloadElement.click () // 点击下载
            document.body.removeChild (downloadElement) // 下载完成移除元素
            window.URL.revokeObjectURL (href) // 释放掉blob对象
            this.loadingPage = false
            // this.$my_message.success ('导出成功')
            this.$message.success ('导出成功')
          }
        }).catch(error => {
          this.$message.error ('服务器访问异常，请从新登录')
        });
      },
      // 查询
      searchBtn() {
        this.loading = true
        this.page = 1
        this.getList ()
      },
      /** 点击分页触发的事件 */
      handlePageChange(pageInfo) {
        this.loading = true
        this.pageNo = pageInfo.page
        this.pageSize = pageInfo.limit
        this.getList ()
      },
      // 清空
      emptyClick() {
        this.searchForm.deptId = ''
        this.searchForm.createTime=''
      },

      bindRowKeys(row) {
        return row.id
      },
      // 多选
      handleSelectionChange(value) {
        this.checkedArr = value
        // element表格多选第一页选中往后翻一页全选，再回到第一页会再次选中第一页的数据，所以需要手动去重
        const hash = {}
        this.checkedArr = this.checkedArr.reduce ((preVal, curVal) => {
          hash[curVal.id] ? '' : hash[curVal.id] = true && preVal.push (curVal)
          return preVal
        }, [])

      },
      getOrder(param) {
        this.loading = true
        if (param.order === 'ascending') {
          this.searchForm.sort = 'asc'
          this.searchForm.sortField = param.prop
        } else if (param.order === 'descending') {
          this.searchForm.sort = 'desc'
          this.searchForm.sortField = param.prop
        } else {
          this.searchForm.sort = ''
          this.searchForm.sortField = ''
        }
        this.getList ()
      },
      // 跳转到部门表格
      deptSheet() {
        this.$router.push ({
          path: '/depperformanceMenu/depchart',
          query: {}
        })
      },

      getDeptList() {
        axios ({
          method: 'post',
          url: '/hr-xc-human-resources-perform-manage/generator/torgdept/queryAllDeptIdAndName'
        }).then (({ data }) => {
          if (data && data.code === '00000') {
            var data = AesDecrypt (data.result)
            this.deptList = data
          }
        }).catch(error => {
          this.$message.error ('服务器访问异常，请从新登录')
        });
      }

    }
  }
</script>
